<template>
    <div class="record">
        <aside>
            <ul>
                <p>分类</p>
                <li v-for="(item, ind) in List" :key="ind" class="li-sort" @click="aquire(ind)" ref="liRef"> <i class="iconfont" v-html="item.icon"></i>  <a href="###">{{item.title}}</a></li>
    
            </ul>
        </aside>

        <div class="main">
            <p class="title">{{title}}</p>

            <div class="icon">
                <div class="icons iconfont" :class="{'act': acts[ind]}"  v-for="(item, ind) in list" :key="item" :title="item.titles" @click="sure(ind)" :tit="item.titles">
                    <a href="###" v-html="item.iconfont"></a>
                </div>
            </div>

            <div class="sort">
                <b>类型： </b><input type="radio" name="sort" v-model="type" value="0" checked>支出
                             <input type="radio" name="sort" v-model="type" value="1">收入
            </div>

            <div class="consume">
                <b>价格：</b> <input type="number" name="consume" v-model="price" autofocus min="0">
            </div>

            <div class="consume">
                <b>数量：</b> <input type="number" name="consume" v-model="number" min="0">
            </div>
            
            <div class="remarks">
                <p>备注：</p> 
                <textarea name="remarks" id="" cols="30" rows="3" v-model="remarks"></textarea>
            </div>
            
            <div class="btns">
                <button class="btn btn-secondary" @click="reset">重置账单</button>
                <button class="btn btn-primary" @click="succ">新建账单</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import qs from 'qs'
import axios from 'axios'
import { useRouter } from "vue-router";
import { defineComponent, ref} from 'vue';

export default defineComponent({
    name: 'record',
    components: {

    },
    setup() {
        const title = ref("服饰")
        //侧边栏总分类
        // const list = ["服饰","餐饮","住宿","出行","购物", "日用", "娱乐","学习", "办公", "医疗", "宠物", "旅游","通信","礼金"]
        //细分类
        // 服饰：上衣，裤子，短裙，连衣裙，衬衫，外套，毛衣，大衣，卫衣，鞋子，袜子，帽子，手套，
        // 餐饮：食材，外卖，堂食，
        // 住宿：民宿，旅馆，酒店
        // 出行：公交车，出租车，地铁，火车，高铁，飞机，轮船，客车，共享电动车，共享自行车,停车费
        // 购物：网上购物，实体店购物，快递
        // 娱乐：ktv，游乐场，电子游戏，运动，脑力游戏，
        // 学习：书籍，资料，视频，学习用品，考试费用，学费，学杂费
        // 办公
        // 医疗：看病，保险，药品，保健品
        // 宠物：宠物食品，宠物健康，宠物卫生，宠物娱乐，
        // 礼金
        //总表总分类与细分类
        const List = [
            {
                icon: " &#xe628; ",
                title: "服饰",
                icons: [{
                    titles: "上衣",
                    iconfont: "&#xe666;"
                },{
                    titles: "裙子",
                    iconfont: "&#xe625;"
                },{
                    titles: "连衣裙",
                    iconfont: "&#xe6ac;"
                },{
                    titles: "衬衫",
                    iconfont: "&#xe696;"
                },{
                    titles: "外套",
                    iconfont: "&#xe601;"
                },{
                    titles: "卫衣",
                    iconfont: "&#xe61b;"
                },{
                    titles: "大衣",
                    iconfont: "&#xe66c;"
                },{
                    titles: "裤子",
                    iconfont: "&#xe633;"
                },{
                    titles: "鞋子",
                    iconfont: "&#xe608;"
                },{
                    titles: "袜子",
                    iconfont: "&#xe614;"
                },{
                    titles: "帽子",
                    iconfont: "&#xe626;"
                },{
                    titles: "手套",
                    iconfont: "&#xe609;"
                },
                ]
            },
            {
                icon: "&#xe605;",
                title: "餐饮",
                icons: [{
                    titles: "食材",
                    iconfont: "&#xe623;"
                },{
                    titles: "外卖",
                    iconfont: "&#xe606;"
                },{
                    titles: "堂食",
                    iconfont: "&#xe605;"
                },{
                    titles: "聚餐",
                    iconfont: "&#xe680;"
                },]
            },
            {
                icon: "&#xe620;",
                title: "住宿",
                icons: [{
                    titles: "民宿",
                    iconfont: "&#xe644;"
                },{
                    titles: "旅馆",
                    iconfont: "&#xe686;"
                },{
                    titles: "酒店",
                    iconfont: "&#xe620;"
                },]
            },
            {
                icon: "&#xe637;",
                title: "出行",
                icons: [{
                    titles: "共享自行车",
                    iconfont: "&#xe692;"
                },{
                    titles: "共享电动车",
                    iconfont: "&#xe63c;"
                },{
                    titles: "公交车",
                    iconfont: "&#xe617;"
                },{
                    titles: "地铁",
                    iconfont: "&#xe679;"
                },{
                    titles: "出租车",
                    iconfont: "&#xe621;"
                },{
                    titles: "客车",
                    iconfont: "&#xe66b;"
                },{
                    titles: "高铁",
                    iconfont: "&#xe66a;"
                },{
                    titles: "火车",
                    iconfont: "&#xe836;"
                },{
                    titles: "轮船",
                    iconfont: "&#xe6f4;"
                },{
                    titles: "飞机",
                    iconfont: "&#xe74d;"
                },{
                    titles: "停车费",
                    iconfont: "&#xe63b;"
                },]
            },
            {
                icon: "&#xe60f;",
                title: "购物",
                icons: [{
                    titles: "网上购物",
                    iconfont: "&#xe670;"
                },{
                    titles: "实体店购物",
                    iconfont: "&#xe74a;"
                },{
                    titles: "快递费用",
                    iconfont: "&#xe697;"
                },]
            },
            {
                icon: "&#xe64f;",
                title: "日用",
                icons: [{
                    titles: "日用",
                    iconfont: "&#xf103;"
                },]
            },
            {
                icon: "&#xe603;",
                title: "娱乐",
                icons: [{
                    titles: "KTV",
                    iconfont: "&#xe643;"
                },{
                    titles: "游乐场",
                    iconfont: "&#xe699;"
                },{
                    titles: "电子游戏",
                    iconfont: "&#xe603;"
                },{
                    titles: "运动",
                    iconfont: "&#xe652;"
                },{
                    titles: "健身",
                    iconfont: "&#xe691;"
                },{
                    titles: "脑力游戏",
                    iconfont: "&#xe6f0;"
                },{
                    titles: "看电影",
                    iconfont: "&#xe645;"
                },]
            },
            {
                icon: "&#xe671;",
                title: "学习",
                icons: [{
                    titles: "书籍",
                    iconfont: "&#xe63e;"
                },{
                    titles: "资料",
                    iconfont: "&#xe76f;"
                },{
                    titles: "学习用品",
                    iconfont: "&#xe62a;"
                },{
                    titles: "考试费用",
                    iconfont: "&#xe632;"
                },{
                    titles: "学费",
                    iconfont: "&#xe665;"
                },]
            },
            {
                icon: "&#xe668;",
                title: "办公",
                icons: [{
                    titles: "办公",
                    iconfont: "&#xe616;"
                },]
            },
            {
                icon: "&#xe648;",
                title: "医疗",
                icons: [{
                    titles: "看病",
                    iconfont: "&#xe64d;"
                },{
                    titles: "保险",
                    iconfont: "&#xe6ba;"
                },{
                    titles: "药品",
                    iconfont: "&#xe648;"
                },{
                    titles: "保健品",
                    iconfont: "&#xe62e;"
                },]
            },
            {
                icon: "&#xe8b3;",
                title: "宠物",
                icons: [{
                    titles: "宠物食品",
                    iconfont: "&#xe60b;"
                },{
                    titles: "宠物健康",
                    iconfont: "&#xe60d;"
                },{
                    titles: "宠物卫生",
                    iconfont: "&#xe61a;"
                },{
                    titles: "宠物娱乐",
                    iconfont: "&#xe61c;"
                },]
            },
            {
                icon: "&#xe64a;",
                title: "旅游",
                icons: [{
                    titles: "旅游",
                    iconfont: "&#xe661;"
                },]
            },
            {
                icon: "&#xec87;",
                title: "通信",
                icons: [{
                    titles: "话费",
                    iconfont: "&#xec97;"
                },]
            },
            {
                icon: "&#xf146;",
                title: "礼金",
                icons: [{
                    titles: "礼金",
                    iconfont: "&#xf146;"
                },]
            },
            {
                icon: "·····",
                title: "其他",
                icons: [{
                    titles: "其他",
                    iconfont: "··"
                },]
            },
        ]
        const list = ref(List[0].icons)

        const acts:any = ref([])

        //点击侧边栏，获取/改变细分类组
        const aquire = function(ind: number) {
            // console.log(ind)
            title.value = List[ind].title
            list.value = List[ind].icons
            //消除点击侧边栏时，细分类的选中依然存在的问题
            acts.value = []
        }

        //点击细分类，选择具体分类
        const sure = function(ind: number) {
            // console.log(ind)
            acts.value = []
            for(var i = 0; i < list.value.length; i++) {
                acts.value.push(false)
            }
            acts.value[ind] = true

            tit.value = list.value[ind].titles
            icon.value = list.value[ind].iconfont
            console.log(list.value[ind].iconfont,list.value[ind].titles)
        }

        //传给后端的数据
        const type = ref(0)
        const tit = ref()
        const icon = ref()
        const price = ref()
        const number = ref()
        const remarks = ref()

        //新建账单，提交账单
        const router = useRouter()
        const succ = () => {
            // console.log(type.value,icon.value,tit.value,price.value,number.value,remarks.value)
            let postData = qs.stringify({
                type: type.value,
                icon: icon.value,
                name: tit.value,
                price: price.value,
                number: number.value,
                remarks: remarks.value,
            })
            axios.post(`/api/addZhangDan`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

                if (res.status === 200) {
                    alert(res.data)
                    console.log(res)
                    type.value = 0
                    tit.value = ""
                    icon.value = ""
                    price.value = ""
                    number.value = ""
                    remarks.value = ""
                    if(res.data === "添加成功") {
                        router.push('/read')
                    }
                }
            })
            console.log("111")
        }

        const reset = () => {
            type.value = 0
            icon.value = null
            tit.value = null
            price.value = null
            number.value = null
            remarks.value = null
            acts.value = []
            for(var i = 0; i < list.value.length; i++) {
                acts.value.push(false)
            }
        }

        return {
            //ES6写法，键值对值相同则省略
            title,
            List,
            list,
            acts,

            aquire,
            sure,
            succ,
            reset,

            type,
            tit,
            icon,
            price,
            number,
            remarks,
        }
    },

    
})
</script>

<style lang="stylus" scoped>
.act
  box-shadow 0 0 0.5rem rgba(131, 171, 175, 0.5)
  a
    color #0d6efd
.record 
  margin-top .5rem
  //background-color #f8f9fa
  aside
    width 18%
    float left
    margin-bottom .5rem
    border 1px #ccc solid 
    box-shadow 0 0 0.1rem rgba(131, 171, 175, 0.5)
    background-color #fff
    // background-color skyblue
    ul 
      padding 0
      margin 0
      p
        font-size 23px
        color #0d6efd
        background-color #f8f9fa
        border-bottom 1px #ccc solid
      li
        list-style none
        line-height 2.35rem
        margin-top .1rem
        background-color #fff
        a
          text-decoration none 
          color #666
      li:hover
        // background-color #f8f9fa
        box-shadow 0 0 0.5rem rgba(131, 171, 175, 0.5)
        a
          color #0d6efd
  .main
    width 81%
    height 40rem
    float right
    padding-bottom 2rem
    border 1px #fff solid 
    box-shadow 0 0 0.1rem rgba(131, 171, 175, 0.5)
    background-color #fff
    // background-color red
    .title
      font-size 23px
      color #0d6efd
      background-color #f8f9fa
      border-bottom 1px #ccc solid
    .icon
      width 100%
      display flex
      align-items center
      justify-content center
      //background-color skyblue
      .icons
        width 6%
        height 60%
        margin-left 20px
        position relative
        border 1px #666 solid
        background-color #fff
        a
          position absolute
          left -535%
          top 10%
          font-size 30px
          font-weight 700
          text-decoration none
          color #666
          width 0rem
          height 0rem
          //background-color red
      .icons:hover
        // background-color #f8f9fa
        box-shadow 0 0 0.5rem rgba(131, 171, 175, 0.5)
        a
          color #0d6efd
    div 
      width 100%
      text-align left
      text-indent  17rem
      height 5rem
    .sort
      line-height 3rem
      //background-color #f8f9fa
    .remarks
      //background-color yellow
      textarea 
        margin-left 20rem
        margin-top -3rem
        resize none
    .btns
      width 100%
      height 4rem
      //background-color red
      .btn
        margin-top 1rem
        margin-right 10%
</style>
